v-bind

• 我們經常會使用Jquery對DOM的class, style, title等HTML屬性進行操作，在Vue則可透過v-bind指令，讓資料跟屬性做動態綁定！
• v-bind是屬於單向綁定，透過變數或用布林值來決定屬性的值。

有單向綁定，當然就有雙向綁定v-model，在後面篇章會再提到

v-bind 縮寫

因為太常需要用到，因此有了縮寫，真的是便利很多呢～

綁定屬性
<a herf="#" v-bind:title="Here is title!">
縮寫
<a herf="#" :title="Here is title!">

來練習一下綁定title屬性吧

<div id="app">
	<a href="#" :title="vueData">Come!</a>
</div>

let app = new Vue({
   el:"#app",
   data: {
	vueData: "我就是標題！"
   }
})

在data定義key是"vueData"，value是"我就是標題！"，使用v-bind讓title屬性與資料綁定，當滑鼠移動連結文字，就會顯示"我就是標題!"

綁定class

• v-bind可以用動態綁定class，讓資料在不同情況會有不同呈現樣貌

<div id="app">
    <button type="button" 
            class="btn" 
            :class="{ 'btn-danger': hasError }">Danger</button>
</div>

let app = new Vue({
    el:"#app",
    data: {
        hasError: true
    }
})

reder結果

<div class="btn btn-danger"></div>

因綁定的hasError數值是ture，因此會顯示出class="btn-danger"

• 用陣列寫法來設定class

<div id="app">
    <button type="button" 
            :class="[active, color]" 
            value="TestValue">我是按鈕</button>
</div>

let app = new Vue({
   el:"#app",
   data: {
    active: 'isActive',
    color: 'btn btn-primary'
   }
})

reder結果

<button type="button" 
            :class="active btn btn-primary" 
            value="TestValue">我是按鈕</button>

綁定style

v-bind也是在HTML屬性設定style，例如：文字設定大小為14px

<div id="app">
    <p :style="size">文字大小</p>
</div>

let app = new Vue({
    el:"#app",
    data: {
        size: 'font-size:14px'
    }
})

也可以用陣列設多個style

<div id="app">
    <p :style="[size, color, family]">文字樣式</p>
</div>

let app = new Vue({
    el:"#app",
    data: {
        size: 'font-size:14px',
        color: 'font-color:red',
        family: 'font-family:DFKai-sb'
    }
})

render結果，會讓文字帶有字體、大小、顏色的變化

透過練習了綁定title、class、style後，對於單向綁定v-bind的使用有了初步了解，明天就輪到v-on囉！

Resource
深入解析VueJs中的V-bind指令